<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮统计页</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body>
<div class="container" style="height:auto;">
	<hr />
    以下是常规按钮
    <hr />
    <div class="row">
    	<label class="control-label">默认：</label>
        <a class="btn  btn-primary">默认</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-primary"&gt;常规按钮默认的HTML结构&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">常规按钮默认的按钮样式：</label>
        <label class="control-label">btn  btn-primary</label>
     </div>
     <hr />
      <div class="row">
        <label class="control-label">按钮禁用写法：</label>
        <label class="control-label">&lt;a href="#" class="btn btn-primary" disabled&gt;常规按钮默认的HTML结构&lt;/a&gt;</label>
     </div>
     <div class="row">
        <label class="control-label">按钮禁用效果：</label>
        <a href="#" class="btn btn-primary" disabled>审核</a>
     </div>
     <hr />
     
     
	<div class="row">
    	<label class="control-label">新增按钮：</label>
        <a href="#" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>新增</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;新增&lt;/a&gt;
        </span>
     </div>
    <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-success </label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-plus</label>
    </div>
    <hr  />
    <div class="row">
    	<label class="control-label">保存按钮：</label>
        <a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span>保存</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-floppy-disk"&gt;&lt;/span&gt;保存&lt;/a&gt;
        </span>
     </div>
    <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-primary </label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-floppy-disk</label>
    </div>
    <hr  />
    	<div class="row">
    	<label class="control-label">保存并新增按钮：</label>
        <a href="#" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>保存并新增</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;保存并新增&lt;/a&gt;
        </span>
     </div>
    <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-success </label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-plus</label>
    </div>
    <hr  />
    <div class="row">
    	<label class="control-label">批量删除按钮：</label>
        <a href="#" class="btn btn-delete"><span class="glyphicon glyphicon-remove"></span> 批量删除</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-delete"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;批量删除&lt;/a&gt;
        </span>
     </div>
    <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-delete</label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-remove</label>
    </div>
    <hr />
    <div class="row">
    	<label class="control-label">审核按钮：</label>
        <a class="btn  btn-primary"><span class="glyphicon glyphicon-edit"></span>审核</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-primary"&gt;  &lt;span class="glyphicon glyphicon-edity"&gt; &lt;/span&gt;审核&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn  btn-primary</label>
     </div>
      <hr />
    <div class="row">
    	<label class="control-label">反审核按钮：</label>
        <a class="btn  btn-primary"><span class="glyphicon glyphicon-share"></span>反审核</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	&lt;a href="#" class="btn btn-primary"&gt;  &lt;span class="glyphicon glyphicon-share"&gt; &lt;/span&gt;反审核&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn  btn-primary</label>
     </div>
     <hr />

     <div class="row">
        <label class="control-label">查看日志：</label>
        <a class="btn  btn-primary"><span class="glyphicon glyphicon-eye-open"></span>查看日志</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
            &lt;a href="#" class="btn btn-primary"&gt;  &lt;span class="gglyphicon glyphicon-eye-open"&gt; &lt;/span&gt;查看日志&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn  btn-primary</label>
     </div>
     <hr />

     <div class="row">
        <label class="control-label">撤销（删除）：</label>
        <a class="btn  btn-primary"><span class="glyphicon glyphicon-trash"></span>撤销</a>
        <a class="btn  btn-primary"><span class="glyphicon glyphicon-trash"></span>删除</a>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
            &lt;a href="#" class="btn btn-primary"&gt;  &lt;span class="glyphicon glyphicon-trash"&gt; &lt;/span&gt;撤销&lt;/a&gt;<br>
         

        </span>
        <label class="control-label">HTML结构：</label>
        <span>
        
            &lt;a href="#" class="btn btn-primary"&gt;  &lt;span class="glyphicon glyphicon-trash"&gt; &lt;/span&gt;删除&lt;/a&gt;

        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn  btn-primary</label>
     </div>
     <hr />
    
    <div class="row">
    	<label class="control-label">登陆按钮：</label>
        <div class="col-sm-12">
          <a href="#" class="btn btn-primary  col-sm-4 ">登 陆</a>
        </div>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-primary col-sm-4 col-sm-offset-4"&gt;登 陆&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-primary  col-sm-4 col-sm-offset-4</label>
     </div>
     <hr />
    <div class="row">
    	<label class="control-label">取消按钮：</label>
        <button class="btn btn-default">取 消 </button>
    </div>
    <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-default"&gt;取 消&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn  btn-default</label>
     </div>
  	 <hr />
     <div class="row">
    	<label class="control-label">查询按钮：</label>
        <a class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon glyphicon-search"&gt;&lt;/span&gt;查询&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-primary</label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-search</label>
    </div>
    <hr />
    <div class="row">
    	<label class="control-label">高级查询按钮：</label>
        <a class="btn  btn-success visible-lg-inline"><span class="glyphicon glyphicon-search"></span> 高级查询</a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn  btn-success visible-lg-inline"&gt;&lt;span class="glyphicon glyphicon glyphicon-search"&gt;&lt;/span&gt;高级查询&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-success visible-lg-inline</label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-search</label>
    </div>
     <hr />
     <div class="row">
    	<label class="control-label">上传附件按钮：</label>
        <a class="btn btn-success">上传附件</a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-success"&gt;上传附件&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-success</label>
     </div>
	 <hr />
     <div class="row">
    	<label class="control-label">查询按钮：</label>
        <a class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-zoom-in"></span> 查看</a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-primary btn-xs"&gt;&lt;span class="glyphicon glyphicon-zoom-in"&gt;&lt;/span&gt;查看&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-primary btn-xs</label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-zoom-in</label>
    </div>
     <hr />
     <div class="row">
    	<label class="control-label">修改按钮：</label>
        <a class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> 修改</a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-primary btn-xs"&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;修改&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-primary btn-xs</label>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-edit</label>
     </div>
     <hr />
     <div class="row">
    	<label class="control-label">付款按钮：</label>
        <a class="btn btn-xs btn-primary">付款</a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-xs btn-primary"&gt;付款&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-xs btn-primary</label>
     </div>
     <hr />
     <div class="row">
    	<label class="control-label">收款按钮：</label>
        <a class="btn btn-xs btn-primary">收款</a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" class="btn btn-xs btn-primary"&gt;收款&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">按钮样式：</label>
        <label class="control-label">btn btn-xs btn-primary</label>
     </div>
     <hr />
     以下是图标按钮
     <hr />
     <div class="row">
    	<label class="control-label">编辑按钮：</label>
        <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" &gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-pencil</label>
     </div>
     <hr />
     <div class="row">
    	<label class="control-label">删除按钮：</label>
        <a href="#"><span class="glyphicon glyphicon-trash"></span></a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" &gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-trash</label>
     </div>
     <hr />
     <div class="row">
    	<label class="control-label">查看按钮：</label>
        <a href="#"><span class="glyphicon glyphicon-search"></span></a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" &gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-search</label>
     </div>
     <hr />
     <div class="row">
    	<label class="control-label">展开按钮：</label>
        <a><span class="glyphicon glyphicon-fullscreen btn-lg"></span></a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" &gt;&lt;span class="glyphicon glyphicon-fullscreen btn-lg"&gt;&lt;/span&gt;&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-fullscreen btn-lg</label>
     </div>
     <hr />
     <div class="row">
    	<label class="control-label">保存按钮：</label>
        <a href="#"><span class="glyphicon glyphicon-floppy-disk btn-lg"></span></a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" &gt;&lt;span class="glyphicon glyphicon-floppy-disk btn-lg"&gt;&lt;/span&gt;&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-floppy-disk btn-lg</label>
     </div>
     <hr />
     <div class="row">
    	<label class="control-label">打印按钮：</label>
        <a href="#"><span class="glyphicon glyphicon-print btn-lg"></span></a>
     </div>
     <div class="row">
        <label class="control-label">HTML结构：</label>
        <span>
        	 &lt;a href="#" &gt;&lt;span class="glyphicon glyphicon-print btn-lg"&gt;&lt;/span&gt;&lt;/a&gt;
        </span>
     </div>
     <div class="row">
        <label class="control-label">图标样式：</label>
        <label class="control-label">glyphicon glyphicon-print btn-lg</label>
     </div>
     <hr />
     <h3>排序图标</h3>
     <div class="row">
         <label class="control-label">升序：</label>
        
         <label class="control-label">有效：</label>
         <i class="caret down"></i>
         <label class="control-label">无效：</label>
         <i class="caret down disabled"></i>
         <br />
         <label class="control-label">降序：</label>
         <label class="control-label">有效：</label>
         <i class="caret"></i>
         <label class="control-label">无效：</label>
         <i class="caret disabled"></i>
         
        
     </div>
     <div>
         <pre>
             <code>
                 &lt;!--升序--&gt;
                 &lt;!--有效--&gt;
                 &lt;i class="caret down"&gt;&lt;/i&gt;
                 &lt;!--无效--&gt;
                 &lt;i class="caret down disabled"&gt;&lt;/i&gt;
               
                 &lt;!--降序--&gt;
                 &lt;!--有效--&gt;
                 &lt;i class="caret"&gt;&lt;/i&gt;
                 &lt;!--无效--&gt;
                 &lt;i class="caret disabled"&gt;&lt;/i&gt;

                 &lt;!--排序图标的使用--&gt;

             </code>
         </pre>
     </div>
     <h3>排序图标使用方法</h3>
     <div class="mylist">
        <table class="table table-bordered table-hover table-striped" border="0" cellspacing="0" cellpadding="0" width="100%">  
            <thead>  
                <tr>  
                    <th>序号 </th>  
                    <th><input type="checkbox"/></th>  
                    <th>操作</th>  
                    <th>引用状态</th>  
                    <th>货物类型 <i class="caret down"></i></th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr>  
                    <td class="">1</td>
                    <td class=""><input type="checkbox"/></td>
                    <td class="">
                        <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
                    
                    </td>
                    <td class="">DH20141163</td>
                    <td class="">DH20141123</td>
                
                </tr>  
            </tbody>  
        </table>
    </div>
    <h3>Code</h3>
    <div>
        <pre>
            <code>
                &lt;div class="mylist"&gt;
                    &lt;table class="table table-bordered table-hover table-striped" border="0" cellspacing="0" cellpadding="0" width="100%"&gt;
                        &lt;thead&gt;
                            &lt;tr&gt;
                                &lt;th&gt;序号 &lt;/th&gt;
                                &lt;th&gt;&lt;input type="checkbox"/&gt;&lt;/th&gt;
                                &lt;th&gt;操作&lt;/th&gt;
                                &lt;th&gt;引用状态&lt;/th&gt;
                                &lt;!--排序图标是放在表头 th 标签里如下黄色背景代码中的红色标记所示，至于是放在文字前还是文字后根据实际情况而定，--&gt;
                                <span style="background-color:#ffd800;">&lt;th&gt;货物类型 <font color="red">&lt;i class="caret down"&gt;&lt;/i&gt;</font>&lt;/th&gt;</span>
                            &lt;/tr&gt;  
                        &lt;/thead&gt; 
                        &lt;tbody&gt;
                            &lt;tr&gt;
                                &lt;td class=""&gt;1&lt;/td&gt;
                                &lt;td class=""&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
                                &lt;td class=""&gt;
                                    &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;     
                                &lt;/td&gt;
                                &lt;td class=""&gt;DH20141163&lt;/td&gt;
                                &lt;td class=""&gt;DH20141123&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

</body>
</html>
